.box1{
    .box2{
        color: red;
    }
    >.box3{
        color: orange;
        &:hover{
            color: green;
        }
    }

    // 为box1设置一个hover
    // &就表示外层的父元素
    &:hover{
        color: blue;
    }

    div &{
        width: 100px;
    }
}

.p1{
    width: 100px;
    height: 200px;
}
// .p2{
//     width: 100px;
//     height: 200px;
//     color: red;
// }

// extend()对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

.p3{
    // 直接对指定的样式进行引用，这里就相当于将盘的样式在这里进行复制
    // mixin 混合
    .p1();
}

// 使用类选择器，可以在选择器后面加一个（），这时实际上就创建了一个mixin
.p4(){
    width: 100px;
    height: 200px;
    background-color: #bfa;
}
.p5{
    .p4;
    // .p4();
}

// mixin
// 直接设置变量
.test(@w:200px, @h:200px, @bcolor:#bfa){
    width: @w;
    height: @h;
    border: 1px solid @bcolor;

}

div{
    // .test(200px,200px,#bfa);
//   .test(@w:200px, @h:200px, @bcolor:#bfa);
.test(300px);
}

span{
    color: average(red,yellow);
}

html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background-color:#bfa ;
    &:hover{
        background-color: darken(#bfa,10%);
    }
}
